<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>订单管理系统</title>
  <link href="/css/bootstrap.css" rel="stylesheet">
  <script src="/js/bootstrap.bundle.js"></script>
  <style>
    body {
      padding-top: 56px;
    }

    .sidebar {
      height: 100%;
      width: 250px;
      position: fixed;
      top: 56px;
      left: 0;
      background-color: #f8f9fa;
      padding-top: 20px;
    }

    .sidebar a {
      padding: 10px 15px;
      text-align: left;
      display: block;
      color: #000;
      text-decoration: none;
    }

    .sidebar a:hover {
      background-color: #ddd;
      color: black;
    }

    .content {
      margin-left: 250px;
      padding: 20px;
    }
  </style>
</head>

<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">订单管理系统</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav"
          aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">欢迎您，管理员（ID: <span th:text="${session.name}"></span>）</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="settingsDropdown" role="button" data-bs-toggle="dropdown"
           aria-haspopup="true" aria-expanded="false">
          设置
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="settingsDropdown">
          <div th:if="${session.isTotalAdmin}">
            <a class="dropdown-item" th:href="@{/inventory}">进入仓库管理</a>
            <a class="dropdown-item" th:href="@{/user/sysAdmin}">进入系统管理</a>
            <div class="dropdown-divider"></div>
          </div>
          <a class="dropdown-item" th:href="@{/logout}">退出登录</a>
          <a class="dropdown-item" href="#" onclick="location.reload();">刷新页面</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

<!-- Sidebar -->
<div class="sidebar">
  <a th:href="@{/order}">全部订单信息</a>
  <a th:href="@{/order/query}">订单查询</a>
  <a th:href="@{/order/manage}">订单管理</a>
  <a th:href="@{/order/reminder}">临近截至订单提醒</a>
  <a th:href="@{/order/demand}">需求原料</a>
  <a th:href="@{/order/supplier}">供应商管理</a>
</div>

<!-- Content -->
<div class="content">
  <h2>订单管理界面</h2>

  <!-- 全部订单信息 -->
  <div id="allOrdersSection" class="section">
    <h3>全部订单信息</h3>
    <table class="table" id="orderTable">
      <thead>
      <tr>
        <th onclick="sortTable(0)">原料名 <span>&#x25B2;</span></th>
        <th onclick="sortTable(1)">数量 <span>&#x25B2;</span></th>
        <th onclick="sortTable(2)">订单金额 <span>&#x25B2;</span></th>
        <th>仓库名</th>
        <th>订单状态</th>

        <th>订单创建日期</th>
        <th>订单截止日期</th>

        <th onclick="sortTable(5)">完成日期 <span>&#x25B2;</span></th>
        <th>供应商</th>
      </tr>
      </thead>
      <tbody>
      <tr th:each="order : ${session.allOrders}">
        <td th:text="${order.getMaterialName()}"></td>
        <td th:text="${order.getMaterialNumber()}"></td>
        <td th:text="${order.getPrice()}"></td>
        <td th:text="${order.getInventoryName()}"></td>
        <td th:text="${order.getStatus()}"></td>

        <td th:text="${order.getStartTime()}"></td>
        <td th:text="${order.getDeadline()}"></td>
        <td th:text="${order.getEndTime()}"></td>

        <td th:text="${order.getSupplierName()}"></td>
        
      </tr>
      </tbody>
    </table>
  </div>


  <!--完成排序的js-->
  <script>
    let ascendingOrder = true; // 初始排序状态为升序

    function sortTable(columnIndex) {
      let table, rows, switching, i, x, y, shouldSwitch;
      table = document.getElementById("orderTable");
      switching = true;
      while (switching) {
        switching = false;
        rows = table.rows;
        for (i = 1; i < (rows.length - 1); i++) {
          shouldSwitch = false;
          x = rows[i].getElementsByTagName("td")[columnIndex];
          y = rows[i + 1].getElementsByTagName("td")[columnIndex];
          if (ascendingOrder) {
            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
              shouldSwitch = true;
              break;
            }
          } else {
            if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
              shouldSwitch = true;
              break;
            }
          }
        }
        if (shouldSwitch) {
          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
          switching = true;
        }
      }
      // 切换排序状态
      ascendingOrder = !ascendingOrder;
      // 更新排序图标
      updateSortIcon(columnIndex, ascendingOrder);
    }

    function updateSortIcon(columnIndex, ascendingOrder) {
      let header = document.getElementsByTagName("th")[columnIndex];
      let icon = header.getElementsByTagName("span")[0];
      icon.innerHTML = ascendingOrder ? "&#x25B2;" : "&#x25BC;";
    }
  </script>
  
</div>

<script>
  function showSection(sectionId) {
    document.querySelectorAll('.section').forEach(function (section) {
      section.style.display = 'none';
    });
    document.getElementById(sectionId).style.display = 'block';
  }

</script>
</body>

</html>
